import React, {useEffect, useRef} from 'react';
import {useLocation, useNavigate} from 'react-router-dom';

const Error404: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const searchParams = new URLSearchParams(location.search);
    const path = searchParams.get('path') || '未知路径';
    const svgRef = useRef<SVGSVGElement>(null);
    const digit1Ref = useRef<SVGTextElement>(null);
    const digit2Ref = useRef<SVGTextElement>(null);
    const digit3Ref = useRef<SVGTextElement>(null);
    const lineRef = useRef<SVGLineElement>(null);

    useEffect(() => {
        let animationFrameId: number;
        let startTime: number | null = null;
        const duration = 1000; // 动画持续时间(ms)
        const jumpHeight = 20; // 数字跳动高度

        const animate = (timestamp: number) => {
            if (!startTime) startTime = timestamp;
            const elapsed = timestamp - startTime;

            // 横线始终显示
            if (lineRef.current) {
                lineRef.current.setAttribute('x1', '50');
                lineRef.current.setAttribute('x2', '250');
            }

            // 仅第三个数字有动画效果
            if (digit3Ref.current) {
                const progress = Math.min(elapsed / duration, 1);
                const jumpValue = Math.sin(progress * Math.PI * 2) * jumpHeight;
                digit3Ref.current.setAttribute('y', `${150 - jumpValue}`);
            }

            // 重置时间开始循环
            if (elapsed >= duration) {
                startTime = null;
            }

            animationFrameId = requestAnimationFrame(animate);
        };

        // 初始显示横线
        if (lineRef.current) {
            lineRef.current.setAttribute('x1', '50');
            lineRef.current.setAttribute('x2', '250');
        }

        animationFrameId = requestAnimationFrame(animate);
        return () => cancelAnimationFrame(animationFrameId);
    }, []);

    return (
        <div style={{
            background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
            textAlign: 'center'
        }}>
            <svg ref={svgRef} width="300" height="250" viewBox="0 0 300 250">
                {/* 阴影滤镜定义 */}
                <defs>
                    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
                        <feDropShadow dx="2" dy="2" stdDeviation="2" floodColor="rgba(0,0,0,0.5)"/>
                    </filter>
                </defs>

                {/* 404数字 - 蓝色带阴影 */}
                <text
                    ref={digit1Ref}
                    x="20"
                    y="150"
                    fontFamily="Arial"
                    fontSize="120"
                    fill="#3a7bd5"
                    filter="url(#shadow)"
                >4
                </text>
                <text
                    ref={digit2Ref}
                    x="110"
                    y="150"
                    fontFamily="Arial"
                    fontSize="120"
                    fill="#3a7bd5"
                    filter="url(#shadow)"
                >0
                </text>
                <text
                    ref={digit3Ref}
                    x="200"
                    y="150"
                    fontFamily="Arial"
                    fontSize="120"
                    fill="#3a7bd5"
                    filter="url(#shadow)"
                >4
                </text>

                {/* 横线 - 北京渐变 */}
                <defs>
                    <linearGradient id="beijingGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stop-color="#3a7bd5"/>
                        <stop offset="100%" stop-color="#00d2ff"/>
                    </linearGradient>
                </defs>
                <line
                    ref={lineRef}
                    x1="50"
                    y1="180"
                    x2="250"
                    y2="180"
                    stroke="url(#beijingGradient)"
                    strokeWidth="4"
                />
                <defs>
                    <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stopColor="#006699"/>
                        <stop offset="100%" stopColor="#95e5f9"/>
                    </linearGradient>
                </defs>
                <line
                    ref={lineRef}
                    x1="150"
                    y1="180"
                    x2="150"
                    y2="180"
                    stroke="url(#lineGradient)"
                    strokeWidth="2"
                    strokeDasharray="300"
                />

                {/* NOT FOUND文字 */}
                <text
                    x="150"
                    y="220"
                    textAnchor="middle"
                    fontFamily="Arial"
                    fontSize="24"
                    fill="#95e5f9"
                >
                    NOT FOUND
                </text>
            </svg>
            {/* 错误信息展示区域 */}
            <div style={{margin: '20px 0', color: '#999', maxWidth: '80%'}}>

                <p>接口路径: {path}</p>
            </div>
            <button
                onClick={() => navigate('/')}
                style={{
                    marginTop: '20px',
                    padding: '10px 20px',
                    backgroundColor: '#006699',
                    color: 'white',
                    border: 'none',
                    borderRadius: '5px',
                    cursor: 'pointer'
                }}
            >
                返回首页
            </button>
        </div>
    );
};

export default Error404;
